<template>
  <v-app>
    <v-navigation-drawer :permanent="true" :mini-variant="!draweropen" :mini-variant-width="64" app v-if="logined">
      <v-app-bar class="primary white--text" flat fixed>
        <v-avatar class="ml-n1" color="white" :size="40">
          <span class="primary--text font-weight-bold">VC</span>
        </v-avatar>
        <span v-if="draweropen" class="text-subtitle-1 font-weight-black ml-5">Vuetify Console</span>
      </v-app-bar>
      <Menu :menus="menus" @opened="draweropen=true"></Menu>
    </v-navigation-drawer>
    <v-app-bar v-if="logined" class="primary white--text vc-header" app flat extended>
      <v-app-bar-nav-icon class="white--text" @click="draweropen=!draweropen">
        <TipIcon v-if="draweropen" icon="mdi-menu-open" tip="收起菜单"></TipIcon>
        <TipIcon v-else icon="mdi-menu" tip="展开菜单"></TipIcon>
      </v-app-bar-nav-icon>
      <v-app-bar-nav-icon class="white--text">
        <TipIcon v-if="fullscreen" icon="mdi-fullscreen-exit" tip="退出全屏" @click="fullscreen=false"></TipIcon>
        <TipIcon v-else icon="mdi-fullscreen" tip="开启全屏" @click="fullscreen=true"></TipIcon>
      </v-app-bar-nav-icon>
      <v-spacer></v-spacer>
      <v-app-bar-nav-icon class="white--text mr-5">
        <MessageBox></MessageBox>
      </v-app-bar-nav-icon>
      <v-menu v-model="profile.show" rounded offset-y :nudge-bottom="10">
        <template v-slot:activator="{ on }">
          <v-avatar class="white" :size="36" circle v-on="on">
            <v-img src="@/assets/logo.png"></v-img>
          </v-avatar>
        </template>
        <v-list>
          <v-list-item>
            <v-list-item-avatar :size="56">
              <v-img src="@/assets/logo.png"></v-img>
            </v-list-item-avatar>
            <v-list-item-content>
              <v-list-item-title class="title"> 行者 </v-list-item-title>
              <v-list-item-subtitle class="mt-1"> sunson468@163.com </v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>
        <v-divider></v-divider>
        <v-list nav flat>
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>mdi-briefcase-account-outline</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title class="subtitle-1">个人信息</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-item link>
            <v-list-item-content>
              <v-btn class="subtitle-1" :height="40" large outlined color="red" block>退出登陆</v-btn>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-menu>
      <div class="ml-3 mr-3">Hi, 行者</div>
      <template v-slot:extension>
        <div class="w100">
          <MenuTab :path="cpath"></MenuTab>
          <v-divider></v-divider>
        </div>
      </template>
    </v-app-bar>
    <v-main>
      <keep-alive :max="50">
        <router-view></router-view>
      </keep-alive>
    </v-main>
    <Model></Model>
  </v-app>
</template>

<script>
  import Menu from '@/components/menu'
  import MenuTab from '@/components/menutab'
  import TipIcon from '@/components/tipicon'
  import MessageBox from '@/components/messagebox'
  import Model from '@/components/model'
  //
  import apiMenus from '@/api/menu.js'
  let menuCount = 0
  export default {
    components: { Model, Menu, MenuTab, TipIcon, MessageBox },
    data() {
      return {
        logined: false,
        draweropen: true, // 菜单是否弹开
        fullscreen: false, // 内容是否全屏
        menus: apiMenus,
        menuInited: false,
        profile: {
          show: false
        },
      }
    },
    watch: {
      $route(to, from) {
        if (from.path === '/login') {
          this.logined = true
        } else if (to.path === '/login') {
          this.logined = false
        } else {
          this.logined = true
        }
        if (to.path !== '/') {
          if (!this.menuInited) this.setMenus(apiMenus)
          this.cpath = to.path
          this.$nextTick(() => {
            this.$vcevent.emit('navopen', this.findMenu(0, this.menus, to.path))
          })
        }
      },
      fullscreen(val) {
        if (val) {
          if (document.body.requestFullscreen) {
            document.body.requestFullscreen()
          } else if (document.body.mozRequestFullScreen) {
            document.body.mozRequestFullScreen()
          } else if (document.body.webkitRequestFullscreen) {
            document.body.webkitRequestFullscreen()
          } else if (document.body.msRequestFullscreen) {
            document.body.msRequestFullscreen()
          }
        } else {
          if (document.exitFullScreen) {
            document.exitFullScreen()
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen()
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen()
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen()
          }
        }
      }
    },
    methods: {
      setMenus(menus) {
        let m
        for (let i in menus) {
          m = menus[i]
          m.id = ++menuCount
          if (m.children) {
            this.setMenus(m.children)
          }
        }
      },
      findMenu(id, menus, path) {
        let m
        for (let i in menus) {
          m = menus[i]
          if (m.path && m.path === path) {
            return { id: id, menu: m }
          } else if (m.children) {
            return this.findMenu(m.id, m.children, path)
          }
        }
      },
    }
  };
</script>

<style lang="less">
  @import url(assets/css/console.less);

  .vc-header .v-toolbar__extension {
    padding: 0;
  }

  .w100 {
    width: 100%;
  }
</style>
